<template>
  <div class="delete-button-container">
    <AButton type="danger" :icon="icon" :loading="loading" @click="delClick">
      <slot>批量删除</slot>
    </AButton>
  </div>
</template>

<script>
export default {
  name: "ADeleteButton",
  props: {
    // 选中的 数据 id 或 其他唯一字段
    selectedKeys: {
      type: Array,
      default: () => [],
    },
    delHttp: Function,
    showIcon: {
      type: Boolean,
      default: true,
    },
    msg: {
      type: String,
      default: "确认批量删除该数据?",
    },
  },
  data() {
    return {
      visible: false,
      loading: false,
    };
  },
  computed: {
    icon() {
      return this.showIcon ? "delete" : "";
    },
  },
  methods: {
    delClick() {
      if (!this.selectedKeys.length)
        return this.$message.warning("请选择要操作的数据");

      if (!(this.delHttp && typeof this.delHttp === "function"))
        return console.error("No_Del_Http");

      this.$confirm({
        title: "提示",
        content: this.msg,
        okText: "确认",
        cancelText: "取消",
        onCancel: () => {
          this.loading = false;
        },
        onOk: async () => {
          this.loading = true;
          try {
            await this.delHttp(this.selectedKeys);
            this.$message.success("批量删除成功!");
            this.loading = false;
            this.$emit('reload')
          } catch (error) {
            this.loading = false;
          }
        },
      });
    },
  },
};
</script>

<style></style>
